
import React from 'react';
import { Cell, Video } from '@nutui/nutui-react';
import { Tabs } from 'antd-mobile'
import './Mingchu.css'
import { Outlet, useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { animated, useSpring } from '@react-spring/web';
export default function Mingchu() {
    const navigate = useNavigate()
    //传递视频地址
    const dara = useLocation()

    const source = {
        src: dara.state?.item[0]?.img1 ?
            dara.state.item[0].img1
            : ' https://cdn.pixabay.com/video/2023/02/07/149665-796691048_large.mp4', // 替换为有效地址
        type: 'video/mp4',
    }
    const options = {
        controls: true,
        autoplay: false,
        muted: false,
        loop: false,
    };

    const play = (elm) => console.log('play', elm);
    const pause = (elm) => console.log('pause', elm);
    const playend = (elm) => console.log('playend', elm);

    //动画
    const props = useSpring({
        opacity: 1,
        transform: 'translateY(0)',
        from: { opacity: 0, transform: 'translateY(-20px)' },
        config: { duration: 500 }, // 增加动画持续时间为500毫秒
    });

    return (
        <div>
            <h3 className='a1'>明厨亮照</h3>
            <Cell style={{ padding: '0' }}>
                <Video
                    source={source}
                    options={options}
                    onPlay={play}
                    onPause={pause}
                    onPlayEnd={playend}
                />
            </Cell>
            {/* 导航 */}
            <Tabs onChange={(key) => { navigate(key) }} activeKey={dara.pathname}>
                <Tabs.Tab title='视频监控' key='/index/kitchen/shipin'>
                    <animated.div style={props}>
                        <Outlet />
                    </animated.div>
                </Tabs.Tab>
                <Tabs.Tab title='基本信息' key='/index/kitchen/jiankong'>
                    <animated.div style={props}>
                        <Outlet />
                    </animated.div>
                </Tabs.Tab>
            </Tabs>
        </div>
    );
}